/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2016, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

mct-include.l-toi-holder,
.l-toi-holder:after,
.l-toi-holder:before {
    display: block;
    position: absolute;
}

mct-include.l-toi-holder {
    $blockerFadeW: $toiBlockerFadeW;
    @include transform(translateX(-50%));
    color: $toiColorBg;
    position: absolute;
    top: 0;
    bottom: 0;
    width: $toiH;
    &:not(.pinned) {
        display: none;
    }

    &.pinned {
        display: block;
    }

    &:before,
    &:after {
        // Vertical lines. TC uses both; plot only uses :before
        border-left: 1px dashed $toiColorBg;
        box-sizing: border-box;
        content: '';
        display: block;
        left: 50%;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        z-index: 2;
    }

    .l-toi {
        // Holds buttons and val. Acts as a blocking element.
        @include background-image(linear-gradient(90deg, transparent, $toiColorBlocker 10%, $toiColorBlocker 90%, transparent 100%));
        position: absolute;
        align-items: center;
        box-sizing: content-box;
        height: $toiH;
        left: $toiPad * -2;
        @include transform(translateY(-50%)); top: 50%;
        padding: $toiPad;
        z-index: 1;

        .l-toi-buttons {
            @include trans-prop-nice($props: (width, padding), $dur: 250ms);
            border-radius: $controlCr;
            box-sizing: content-box;
            font-size: $toiH;
            height: 100%;
            line-height: $toiH;
            padding: $toiPad;
            overflow: hidden;
            white-space: nowrap;
            justify-content: space-between;
            width: $toiH;

            &:hover {
                // Expand and display controls; clock icon changes to resync
                background-color: $toiColorBg;
                cursor: pointer;
                width: 30px;

                .icon-button {
                    color: rgba($toiColorCtrlFg, 0.5);
                    opacity: 1;
                    &:hover {
                        color: $toiColorCtrlFg;
                    }
                }

                .t-button-resync {
                    order: 1;
                    &:before {
                        content: $glyph-icon-resync;
                    }
                }
                .t-button-unpin {
                    order: 2;
                    &:hover {
                        color: $toiColorBgAlert;
                    }
                }

                & + .l-toi-val {
                    // Dim the value to emphasize the controls
                    opacity: 0.5;
                }
            }
        }

        .icon-button {
            color: $toiColorBg;
        }

        .t-button-resync {
            @extend .icon-clock;
            &:hover { color: $toiColorCtrlFg; }
        }

        .t-button-unpin {
            @include trans-prop-nice($props: opacity, $dur: 150ms);
            @extend .icon-x-in-circle;
            float: right;
            opacity: 0;
        }
    }

    .l-toi-val {
        display: none; // Hide by default; see .show-val below
    }

    // TOI is showing value as well
    &.show-val {
        .l-toi {
            .l-toi-buttons {
                order: 1;
                &:hover {
                    margin-right: $interiorMarginSm;
                }
            }
            .l-toi-val {
                @include trans-prop-nice($props: opacity, $dur: 150ms);
                background-color: $toiColorBg;
                border-radius: $controlCr;
                box-sizing: content-box;
                color: $toiColorFg;
                display: inline-block;
                font-size: 0.7rem;
                font-weight: 400;
                height: $toiH;
                line-height: $toiH;
                order: 2;
                padding: 1px 3px;
                white-space: nowrap;
            }
        }

        &.val-to-left {
            .l-toi {
                left: auto;
                right: $toiPad * -2;

                .l-toi-buttons {
                    order: 2;
                    &:hover {
                        .t-button-resync { order: 2; }
                        .t-button-unpin { order: 1; }
                        margin-left: $interiorMarginSm;
                    }
                }

                .l-toi-val {
                    order: 1;
                }
            }
        }
    }
}


// TOI in tables
.tabular,
table {
    tbody, .tbody {
        tr, .tr {
            &.l-toi-tablerow {
                border-top: 1px dashed $toiColorBg;
                z-index: 1;
                td, .td {
                    .l-toi-holder {
                        left: 50% !important;
                        &:before,
                        &:after {
                            display: none;
                        }
                        .l-toi {
                            background: rgba($toiColorBlocker, 0.9);
                            border-radius: 20%;
                            height: auto;
                            padding: $toiPad;
                            @include transform(translate(-50%, -50%));
                            left: 50%; right: auto; top: 0;
                            .l-toi-buttons {
                                padding: 1px;
                                &:hover {
                                    padding: $toiPad;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// TOI in plots
.gl-plot {
    .gl-plot-wrapper-display-area-and-x-axis {
        right: nth($plotDisplayArea, 2) + ($toiH / 2) + $toiPad; // Make room for TOI element

        .l-toi-holder {
            bottom: nth($plotDisplayArea, 3) - $interiorMargin;
            z-index: 3;

            .l-toi {
                @include transform(translateY(100%));

            }

            .l-toi {
                top: auto;
                bottom: $toiPad;
            }
        }
    }
}

// TOI in Time Conductor
.l-time-conductor {
    .l-toi-holder {
        $linesVOffset: 2px;
        &:before,
        &:after {
            // Vertical lines
            border-left-style: solid;
            height: ((nth($ueTimeConductorH, 2) - $timeCondTOIIconD)/2) + $linesVOffset;
        }

        &:before {
            @include transform(translate(-50%, $linesVOffset * -1));
            top: 0px;
            bottom: auto;
        }

        &:after {
            @include transform(translate(-50%, $linesVOffset));
            top: auto;
            bottom: 0px;
        }
    }
}
